<template>
	<view>
		<view class="page_title">
			<nav-back></nav-back>
			<view class="page_name">人脸认证</view>
			<view class="blank"></view>
		</view>

		<view class="banxin">
			<view class="auth">
				<view class="why">
					请拍摄一张正脸照片
				</view>
				<view class="tip">
					<view class="point"></view>光线充足，避免过曝/过暗
				</view>
				<view class="tip">
					<view class="point"></view>面部清晰完整
				</view>
			</view>
			<view class="face">
				<image :src="avatarUrl" mode="" />
			</view>
			<button class="next" type="primary" @click="handleCapture">开始拍摄</button>
		</view>

		<u-popup :show="showPopup" mode='center' @close="handleClose">
			<view class="back" @click="handleClose">
				<image src="/static/img/back.png" mode="" />
			</view>
			<view class="icon">
				<view class="success" v-if="authStatus==1">
					<image src="/static/img/auth_success.png" mode="" />
					认证成功
				</view>
				<view class="fail" v-if="authStatus==2">
					<image src="/static/img/auth_fail.png" mode="" />
					认证失败
				</view>
				<view class="over" v-if="authStatus==3">
					<image src="/static/img/auth_over.png" mode="" />
					实名认证系统接口数量已耗尽
				</view>
			</view>
			<button type="primary" @click="handleClose">确定</button>
		</u-popup>

	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		data() {
			return {
				name: '',
				idCard: '',
				showPopup: false,
				authStatus: 0,
				avatarUrl: 'https://outin-5ea1f168894611eca06300163e1c94a4.oss-cn-shanghai.aliyuncs.com/image/default/2BD2443E13914DF0B3E1072D496AD891-6-2.png'
			}
		},
		components: {
			NavBack
		},
		onLoad(option) {
			console.log(option, 'onLoad');
			this.name = option.name
			this.idCard = option.idCard
		},
		methods: {
			// 假设blob是一个图片的Blob对象
			blobToBase64(blob, callback) {
				// 创建FileReader对象
				let reader = new FileReader();
				reader.onload = function(e) {
					// 当读取操作完成时，调用callback函数并传入转换后的base64字符串
					callback(e.target.result);
				};
				reader.readAsDataURL(blob);
			},
			handleCapture() {
				let that = this
				uni.chooseImage({
					count: 1,
					mediaType: ['mix'],
					sourceType: ['camera'],
					maxDuration: 30,
					camera: 'front',
					success(res) {
						uni.showLoading({
						  title: '加载中',
						});
						console.log(res.tempFilePaths, 'res')
						// 预览图片
						let xhr = new XMLHttpRequest();
						xhr.open('GET', res.tempFilePaths[0], true);
						xhr.responseType = 'blob';
						xhr.onload = function() {
							if (this.status == 200) {
								let blob = this.response;
								console.log(this.response,'this.response');
								// 调用转换函数
								that.blobToBase64(blob, function(base64) {
									console.log('Base64:', base64);
									// 此处可以使用base64，例如赋值给img的src或者其他用途
									request(`/sms/detect`, {
										method: 'POST',
										data: {
											base64Data: base64.slice(23),
											idCard: that.idCard,
											name: that.name
										}
									}).then(((res) => {
										uni.hideLoading()
										console.log(res.data, 'res');
										that.showPopup = true
										if (res.data.code == 1) {
											that.authStatus = 1
										} else {
											uni.showToast({
												title: res.data.msg,
												icon: 'none',
												duration: 2000
											})
											that.authStatus = 2
										}
									}))
								});
							}
						};
						xhr.send();
					}
				})
			},
			handleClose() {
				this.showPopup = false
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	/* pages/faceauth/faceauth.wxss */

	.auth {
		color: rgba(51, 51, 51, 1);

		.why {
			display: flex;
			align-items: center;
			margin-top: 50rpx;
			font-weight: 500;
			line-height: 46rpx;
		}

		.tip {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			margin-top: 15rpx;
			color: rgba(102, 102, 102, 1);

			.point {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				margin: 10rpx;
				background-color: rgba(156, 156, 255, 1);
			}
		}
	}

	.u-popup /deep/ .u-popup__content {
		width: 600rpx;
		height: 500rpx;
		border-radius: 40rpx;
		padding: 40rpx;

		.back {
			width: 65rpx;
			height: 65rpx;
			border-radius: 20rpx;
			background-color: #EBEBFF;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.icon {
			font-size: 36rpx;
			color: rgba(51, 51, 51, 1);
			;
			text-align: center;

			image {
				display: block;
				margin: 20rpx auto;
				width: 110rpx;
				height: 110rpx;
			}
		}

		button {
			position: absolute;
			width: 85%;
			bottom: 30rpx;
		}
	}

	.face {
		margin-top: 85rpx;

		image {
			width: 600rpx;
			height: 500rpx;
			margin: 0 auto;
			display: block;
		}
	}

	.next {
		position: absolute;
		width: 85%;
		bottom: 100rpx;
	}
</style>